<template>
  <div class="conter">
    <!-- 顶部栏 -->
    <div class="topInfo">
      <div class="imgInfo">
        <van-image
          round
          width="64px"
          height="64px"
          fit="cover"
          :src="userInfo.photo"
        />
      </div>
      <h2>
        {{ userInfo.name }}
        <br />
        <van-tag color="#fff" text-color="#0098fa">{{
          userInfo.birthday
        }}</van-tag>
      </h2>
    </div>
    <!-- 导航栏 -->

    <van-row class="dhlist">
      <van-col span="8">
        <van-icon name="star" color="#f00" />
        <br />
        我的收藏
      </van-col>
      <van-col span="8">
        <van-icon name="fire" color="#0f0" />
        <br />
        我的阅读
      </van-col>
      <van-col span="8">
        <van-icon name="setting" color="#00f" />
        <br />
        我的设置
      </van-col>
    </van-row>
    <van-cell-group>
      <van-cell title="编辑资料" to="/bjzl" is-link icon="edit" />
      <van-cell title="小智同学" to="/xztx" is-link icon="chat-o" />
      <van-cell title="系统设置" to="" is-link icon="setting-o" />
      <van-cell
        title="退出登录"
        to=""
        is-link
        icon="warning-o"
        @click="tuichu"
      />
    </van-cell-group>
  </div>
</template>

<script>
import { getInfo } from "./user.js";
import {removeToken} from '@/utils/token.js'
export default {
  name: "user",
  data() {
    return {
      userInfo: {},
    };
  },
  methods: {
    tuichu() {
      this.$dialog.confirm({
        title: "温馨提示",
        message: "您确定退出登录吗?",
      }).then(() => {
        this.userInfo = null
        removeToken()
        this.$router.push('/')
      }).catch(() => {

      })
    },
  },
  created() {
    getInfo().then((res) => {
      this.userInfo = res.data.data;
      // 将数据更新到vuex中
      this.$store.commit('setUserInfo',res.data.data)
    });
  },
};
</script>

<style lang='less'>
.conter {
  .topInfo {
    height: 100px;
    background-color: #0098fa;
    display: flex;
    color: #fff;
    align-items: center;
    .imgInfo {
      padding: 0 15px;
    }
    h2 {
      font-size: 18px;
      font-weight: 400;
    }
  }
  .dhlist {
    text-align: center;
    padding: 14px 0;
    .van-col {
      font-size: 16px;
      .van-icon {
        font-size: 26px;
      }
    }
  }
}
</style>